<template>
<div>
    <div class="page-header">
        <Row>
            <Col span="10">
                <Button type="success" class="lyx-mr10" @click="addData">添加</Button>
                <Modal title="添加" v-model="modal1" :mask-closable="false" :closable="false" @on-cancel="modal1=false">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                       <FormItem label="所属公司" prop="company_id" >
                        <Select v-model="formValidate.company_id" clearable  placeholder="请选择公司名称">
                            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                       </FormItem>
                      <FormItem label="所属部门" prop="office_id">
                            <Select v-model="formValidate.office_id" clearable  placeholder="请选择所属部门">
                                <Option v-for="item in officeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="登录名称" prop="login_name">
                            <Input v-model="formValidate.login_name" placeholder="请输入登录名" ></Input>
                        </FormItem>
                        <FormItem label="用户密码" prop="password">
                            <Input v-model="formValidate.password" placeholder="请输入密码" type="password"></Input>
                        </FormItem>
                        <FormItem label="工号" prop="no">
                            <Input v-model="formValidate.no" placeholder="请输入工号"></Input>
                        </FormItem>
                        <FormItem label="姓名" prop="name">
                            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <FormItem label="邮箱" prop="email">
                            <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
                        </FormItem>
                        <FormItem label="电话" prop="phone">
                            <Input v-model="formValidate.phone" placeholder="请输入电话号"></Input>
                        </FormItem>
                        <FormItem label="手机" prop="mobile">
                            <Input v-model="formValidate.mobile" placeholder="请输入手机号"></Input>
                        </FormItem>
                     <!--   <FormItem label="用户类型" prop="user_type">
                            <Select v-model="selectCompanyType" clearable >
                                <Option v-for="item in companyTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>-->
                        <FormItem label="用户类型" prop="user_type">
                            <RadioGroup v-model="formValidate.user_type">
                                <Radio label="1">系统管理</Radio>
                                <Radio label="2">公司管理</Radio>
                                <Radio label="3">部门管理</Radio>
                                <Radio label="4">普通用户</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="可否登录" prop="login_flag">
                            <RadioGroup v-model="formValidate.login_flag">
                                <Radio label="1">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button type="error" @click="modal1=false">取消</Button>
                        <Button @click="handleReset('formValidate')" type="warning" style="margin-left: 8px" >重置</Button>
                        <Button type="success" @click="handleSubmit('formValidate')">提交</Button>
                    </div>
                </Modal>
                <Button type="error" @click="delSelect">批量删除</Button>
            </Col>
        </Row>
    </div>
    <div class="page-content">
        <Row>
            <Col span="24" class="lyx-mb10">
                <Table border ref="selection" :loading="loading" :columns="columns4" :data="apiResult.results" @on-selection-change="tableSelectChange">
                    <template slot="status" slot-scope="{ row }">
                        <i-switch size="large" :value="row.status==1?true:false">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </template>
                </Table>
            </Col>
        </Row>
        <Row type="flex" justify="space-between" class="lyx-mb10">
            <Col span="12">
                <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>
                <Button @click="handleSelectAll(false)">取消</Button>
            </Col>
            <Col span="12">
                <Page :total="apiResult.totalRecord" show-total @on-change="pageChange"/>
            </Col>
        </Row>
    </div>
</div>
</template>

<script>
import { userList, userDel } from '@/api/auth'
export default {
  data () {
    return {
      columns4: [
        {
          title: '所属公司',
          key: 'company_id'
        },
        {
          title: '所属部门',
          key: 'office_id'
        },
        {
          title: '登录名称',
          key: 'login_name'
        },
        {
          title: '密码',
          key: 'password'
        },
        {
          title: '工号',
          key: 'no'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '电话',
          key: 'phone'
        },
        {
          title: '手机',
          key: 'mobile'
        },
        {
          title: '用户类型',
          key: 'user_type'
        },
        {
          title: '用户头像',
          key: 'photo'
        }, {
          title: '是否登录',
          key: 'login_flag'
        },
        {
          title: '备注',
          key: 'remarks'
        }

      ],
      apiResult: {},
      totalPage: 0,
      selectData: [],
      modal1: false,
      companyList: [
        {
          value: '航空航天有限公司',
          label: '航空航天有限公司'
        },
        {
          value: '天天有限公司',
          label: '天天有限公司'
        }

      ],
      officeList: [
        {
          value: '技术部',
          label: '技术部'
        },
        {
          value: '市场部',
          label: '市场部'
        }
      ],

      /* companyTypeList: [
        {
          value: '系统管理',
          label: '系统管理'
        },
        {
          value: '公司管理',
          label: '公司管理'
        },
        {
          value: '部门管理',
          label: '部门管理'
        }, {
          value: '普通用户',
          label: '普通用户'
        }
      ], */
      formValidate: {
        company_id: '',
        selectCompany: '',
        office_id: '',
        selectOffice: '',
        login_name: '',
        password: '',
        no: '',
        name: '',
        email: '',
        phone: '',
        mobile: '',
        user_type: '',
        login_flag: '',
        status: 1
      },
      ruleValidate: {

        company_id: [
          { required: true, message: '请选择公司名', trigger: 'blur' }
        ],
        office_id: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        login_name: [
          { required: true, message: '登录名称必须填写', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必须填写', trigger: 'blur' }
        ],
        no: [
          { required: true, message: '用户编号必须填写', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '姓名必须填写', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '姓名必须填写', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '联系方式必须填写', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getUserList({})
  },
  methods: {
    getUserList (param) {
      this.loading = true
      userList(param).then(ret => {
        if (ret.data.errcode === 1001) {
          let data = ret.data.data
          let headerData = [{ type: 'selection', width: 60, align: 'center' }]
          for (let item in data.header) {
            if (item === 'status') {
              headerData.push({ title: data.header[item], slot: item })
            } else {
              headerData.push({ title: data.header[item], key: item })
            }
          }
          this.columns4 = headerData
          this.apiResult = data
        } else {
          this.$Message.error(ret.data.errmsg)
        }
        this.loading = false
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    pageChange (e) {
      this.getUserList({ page: e })
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item, index) => {
        ids.push(item.id)
      })
      userDel({ id: JSON.stringify(ids) }).then(ret => {
        if (ret.data.errcode === 1001) {
          this.getUserList({})
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    addData () {
      this.modal1 = true
    },
    handleSubmit (formValidate) {
      this.$refs[formValidate].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功！')
        } else {
          this.$Message.error('数值填写不正确！')
        }
      })
    },
    handleReset (formValidate) {
      this.$refs[formValidate].resetFields()
    }
  }
}
</script>

<style scoped>
.page-header{
    margin-bottom: 20px;
}
.lyx-mr10{
    margin-right: 10px;
}
.lyx-mb10{
    margin-bottom: 10px;
}
</style>
